<template>
    <div class="common-table" id="commonTableId" v-loading="tableLoading">
        <el-table
            :data="tableData"
            width="100%"
            height="100%"
            ref="tableRef"
            stripe
        >
            <template v-slot:empty>
                <div class="common-empty" v-show="!tableLoading">
                    <div class="content">暂无列表数据</div>
                </div>
            </template>
            <slot></slot>
        </el-table>
        <div class="page-container">
            <el-pagination
                background
                :currentPage="currentPage"
                :page-size="pageSize"
                :page-sizes="[5, 10, 15, 20]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            >
            </el-pagination>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
const props = defineProps({
    asyncMethod: {
        type: Function,
        default: () => {},
    },
});
const tableData = ref([]);
const tableLoading = ref(false);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const handleSizeChange = (val: number) => {
    pageSize.value = val;
    refreshTable(true);
};
const handleCurrentChange = (val: number) => {
    currentPage.value = val;
    refreshTable();
};
const refreshTable = (flag = false) => {
    if (flag) {
        currentPage.value = 1;
    }
    tableLoading.value = true;
    const data = {
        pageSize: pageSize.value,
        currentPage: currentPage.value,
    };
    props.asyncMethod(data).then((res: []) => {
        tableData.value = res;
        total.value = 25;
        setTimeout(() => {
            tableLoading.value = false;
        }, 500);
    });
};
onMounted(() => {});
defineExpose({
    refreshTable,
});
</script>

<style lang="scss" scoped>
.common-table {
    width: 100%;
    .page-container {
        margin-top: 20px;
        display: flex;
        justify-content: center;
    }
}
</style>
